此篇會簡單介紹格線系統原理以及使用技巧。

Bootstrap5 格線系統是基於 flex，想活用格線系統可以先多加了解 flexbox 盒模型，剛好上一集有稍微講解。

在介紹格線系統之前，想先來分享 魔術數字（magic number）是什麼？

魔術數字（magic number）

白話文：寫死大小（寬高）樣式。

STAR Method：

情境：假設今天拿到設計稿後。

任務：某個元素開出以下規格。

• 左200px
• 右800px

行動：工程師就直接寫死寬高。

• width:300px; width:680px;

結果：當寫死樣式過多後，就容易造成以下問題。

• 可讀性不高
• 難以維護

當維護到這種 code...

使用格線系統就可以大幅降低 magic number 的問題。

格線系統（Gird System）

格線系統的出現，解決了傳統無法解決的問題（例如上方的 magic number）

容器與內容的概念：格線表示為容器，而網頁所呈現的資訊就稱為內容。

• 格線所代表的容器將會決定定位、寬度大小，內容不會有自己的寬度，都是由容器決定。

早期電腦螢幕解析度多數是 1024x768，960 則是多數值的最小公倍數，所以將 960px 為最大寬度，960 Grid System 就誕生了。

960 Grid System

去除左右兩邊各 10px 的空間，留下中間 940px 的區塊以 20px 作為間隔，並加入了容器與內容的概念。

關鍵字

• column（欄）：類似於 Excel 欄位的概念，從左至右。

  • 常見總欄數是 12：因為它容易整除，可用 2 3 4 6 整除。（其他常見的還有十六欄、二十四欄，但大宗還是 十二欄）

• gutter（間距）：column 彼此之間的距離。

  • 通常使用 padding 或 margin 來推，960 Grid System 是使用 margin。
  • Bootstrap 則使用 padding，預設寬度為 1.5rem （24px）。
    • .gx-* ：控制水平 gutter 的寬度。
    • .gy-* ：控制垂直 gutter 的寬度。
    • .g-* ：控制水平、垂直 gutter 的寬度。
    • g-0：取消預設水平 gutter 的寬度，這將會移除 .row 的負值 margin 以及所有直屬子列的水平 padding 。

Bootstrap 5 格線系統

格線系統中的排版三劍客： .container 、 .row、 .col 1~12

.container

是一個容器，可以把內容物居中。

有兩種寬度寫法：

• .container ：固定寬度
• .container-fluid ：滿版

重要觀念：

• 在使用格線系統時最外層至少一定要有一個 .container。
• .container 下第一層不一定要是 .row 。

.row

列，用來包住 column。

設置不要間距語法：

• no-gutters ：讓欄位彼此連在一起。

重要觀念：

• .row 內層只能是 .col 。

.col 1~12

將內容放置在 col 中。

col 數值計算：每一列需要的欄數 / 12。

• ex：每一列三欄 12/3 = 4 ，則一個 row 裡設置三個 .col-4 即可。

重要觀念：

• .col 上一層只能是 .row 。

  • 不要更改寬度（margin、padding），容易造成跑版，有需要則在 row 使用 gutters 即可，但可以加上下的 margin 與 padding。

• col 後面不接數字，則會照內容去做寬度分配自適應。

  • ex：<div class="col">1</div>

實作格線系統 4 步驟

使用順序：

container > 其他元素，可有可無（ex：h2） > row > col > 內容

步驟 1、要寫在 container 容器裡面。（因此最外層一定要有一個 container）

• .container 固定寬度
• .container-fluid 滿版

步驟 2、.row（row 裡面第一層只能是 col）

步驟 3、在 row 裡 .col 總數加起來 12。（col 外層第一層只能是 row）

步驟 4：網頁內容與元件請放在 .col-* 裡面。

• 眼尖的朋友有發現上方範例是有 3 個 col-6，因為格線系統使用 flex，達到自適應的效果。（col 加起來 > 12 就會跳到下一列）

• 假設今天是 col-8、col-6，那 col-6 還是會跳到下一行因為加起來超過 12。

使用守則

1. 外層一定要有 container，container 內第一層不一定要是 row。
2. row 裡層只能放 col。
3. col 外層只能放 row。
4. 其他元素、元件放置在 col。
5. flex-wrap:wrap; 代表 col 超過 100% 會往下掉（超過 12 時）。

常見錯誤：千萬千萬不要使用以下方法

1. 在 col 更改寬度 width → 會導致跑版（更改上下可以）。
2. 在格線系統調整左右 margin、padding → 會導致跑版。
   • 可以加上下 的 margin 與 padding（border 是往內推的所以不會影響，因為 border-box 特性）。
3. 通常選單不做 col 因為選單是不規則的（內容、數量）→ 會改用 navbar 導覽列。